﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>Easyui扩展库 Tree - 落阳 整理</title>
    <link href="http://www.easyui-extlib.com/Content/Site.css" rel="stylesheet" />
    <script src="http://www.easyui-extlib.com/Scripts/jquery/jquery-1.11.0.min.js"></script>
    <script src="http://www.easyui-extlib.com/Scripts/jquery-extensions/jquery.jdirk.js"></script>
    <link href="http://www.easyui-extlib.com/Scripts/jquery-easyui/jquery-easyui-1.4.3/themes/default/easyui.css" rel="stylesheet" />
    <link href="http://www.easyui-extlib.com/Scripts/jquery-easyui/jquery-easyui-1.4.3/themes/icon.css" rel="stylesheet" />
    <script src="http://www.easyui-extlib.com/Scripts/jquery-easyui/jquery-easyui-1.4.3/jquery.easyui.min.js"></script>
    <script src="http://www.easyui-extlib.com/Scripts/jquery-easyui/jquery-easyui-1.4.3/locale/easyui-lang-zh_CN.js"></script>

    <script src="http://www.easyui-extlib.com/Scripts/jquery-easyui-extensions/tree/jeasyui.extensions.tree.getTheRoot.js"></script>
    <script>
        $(function () {
            var data = [
                {
                    "id": "1", "text": "A", "attributes": { "IsGay": true },
                    "children":
                        [
                            { "id": "11", "text": "A1", "attributes": { "IsGay": true } },
                            { "id": "12", "text": "A2", "attributes": { "IsGay": false } },
                            { "id": "13", "text": "A3", "attributes": { "IsGay": true } }
                        ]
                },
                { "id": "2", "text": "B", "attributes": { "IsGay": false } },
                { "id": "3", "text": "C", "attributes": { "IsGay": false } }
            ];

            $("#tree").tree({
                data: data
            });

            $("#btnGet1").click(function () {
                var node = $("#tree").tree("find", 12);
                if (node) {
                    var rootNode = $("#tree").tree("getTheRoot", node.target);
                    if (rootNode) {
                        alert("获取到的 root 节点是[" + rootNode.text + "]");
                    } else {
                        alert("root 节点不存在。");
                    }
                }
            });

            $("#btnGet2").click(function () {
                var node = $("#tree").tree("find", 13);
                if (node) {
                    var rootNode = $("#tree").tree("getTheRoot", node.target);
                    if (rootNode) {
                        alert("获取到的 root 节点是[" + rootNode.text + "]");
                    } else {
                        alert("root 节点不存在。");
                    }
                }
            });

            $("#btnGet3").click(function () {
                var node = $("#tree").tree("find", 3);
                if (node) {
                    var rootNode = $("#tree").tree("getTheRoot", node.target);
                    if (rootNode) {
                        alert("获取到的 root 节点是[" + rootNode.text + "]");
                    } else {
                        alert("root 节点不存在。");
                    }
                }
            });
        });
    </script>
</head>
<body>
    <div class="easyui-layout" data-options="fit:true">
        <div data-options="region:'west',border:false,title:'这里有颗树'" style="width: 200px; border-right-width: 1px;">
            <ul id="tree"></ul>
        </div>
        <div data-options="region:'center',border:false,title:'操作面板'" style="padding:20px;">
            <div style="width:470px;height:350px;border:1px solid red;padding:10px;">
                带层级的数据源格式：
                <pre>
[
    { "id":"1","text":"A","attributes":{ "IsGay": true },
        "children":
            [
                { "id": "11", "text": "A1","attributes":{ "IsGay": true } },
                { "id": "12", "text": "A2","attributes":{ "IsGay": false } },
                { "id": "13", "text": "A3","attributes":{ "IsGay": true } }
            ] 
    },
    { "id":"2","text":"B","attributes":{ "IsGay": false } },
    { "id":"3","text":"C","attributes":{ "IsGay": false } }
]
</pre>
                <br />
                <a id="btnGet1" class="easyui-linkbutton" data-options="iconCls:'icon-add'">获取 west 面板中的 tree 的“id 为 12”的节点的 root 节点</a>
                <br />
                <br />
                <a id="btnGet2" class="easyui-linkbutton" data-options="iconCls:'icon-add'">获取 west 面板中的 tree 的“id 为 13”的节点的 root 节点</a>
                <br />
                <br />
                <a id="btnGet3" class="easyui-linkbutton" data-options="iconCls:'icon-add'">获取 west 面板中的 tree 的“id 为 3”的节点的 root 节点</a>
            </div>
        </div>
    </div>
</body>
</html>
